<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="dragStatic/js/common.js"></script>
    <script src="preview/js/echarts.min.js"></script>
    <script src="preview/js/countUp.js"></script>
    <title>大数据单模块-借还书系统</title>
    <style>
        .borrow-content{width: 100%;position: relative;}
        .borrow-content p:nth-of-type(2){color:#6eebec;font-size:0.24rem;}
        .borrow-content p:nth-of-type(2) small{font-size:0.16rem;}
        .borrow_today,.borrow_week,.borrow_total{position: absolute;top:0;text-align:center;background-color: #1c1b26;height: 0.8rem;}
        .borrow_today{width: 24%;left:0;}
        .borrow_week{width: 24%;left:25%;}
        .borrow_total{width: 50%;left:50%;}
        .borrow_des{padding:0.12rem 0 0.06rem 0;}
        #chart{position: absolute;left:0;top:1rem;width: 100%;height: 2.4rem;}

        /*1366下面*/
        @media screen and (max-width: 250px) {
            .borrow_des{
                padding: 0.02rem 0 0 0;
            }

        }



    </style>
</head>
<body>
    <div class="borrow">
        <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="borrow_count_str">借还书系统</span></div>
        <div class="borrow-content">
            <div class="borrow_today">
                <p class="borrow_des">今日借阅</p>
                <p><span id="borrow_todayNum">--</span><small>册</small></p>
            </div>
            <div class="borrow_week">
                <p class="borrow_des">本周借阅</p>
                <p><span id="borrow_weekNum">--</span><small>册</small></p>
            </div>
            <div class="borrow_total">
                <p class="borrow_des">累积借阅</p>
                <p><span id="borrow_totalNum">--</span><small>册</small></p>
            </div>
            <div id="chart"></div>
        </div>
        <div class="block"></div>

    </div>
</body>
<script>

    //借还书数字变化动效函数
    var borrow_move_flag=false,t1,t2,t3,outByDay,outByWeek,outByAll,borrow_timer=null,op1={suffix:'册'};
    function borrow_num_move(){
        clearTimeout(borrow_timer);
        t1 = new CountUp($("#borrow_todayNum"), 0, outByDay,0,4,op1);
        t2 = new CountUp($("#borrow_weekNum"), 0, outByWeek,0,4,op1);
        t3 = new CountUp($("#borrow_totalNum"), 0, outByAll,0,4,op1);
        t1.start();t2.start();t3.start();
        borrow_timer=setTimeout(borrow_num_move,12000);
    }

//    $('window').resize(function(){page_init(100,572,"借还书系统");currentFontSize = page_init(100,572,"借还书系统");myChart.resize();});
    window.onload = function(){
        var currentFontSize;
        page_init(100,572,"借还书系统");
        currentFontSize=page_init(100,572,"借还书系统");
        var gobalAddr="whfw.superlib.com:9025";
        var wsPath1 = "wss://" + gobalAddr + "/cxts/websocket/borrow_count";
        var wsPath2 = "wss://" + gobalAddr + "/cxts/websocket/borrow_line";
        borrow_book(wsPath1);
        mychart(wsPath2);
        var myChart,option;
        myChart = echarts.init(document.getElementById('chart'));
        option = {
            title : {
                text: '借出、还入曲线图',
                textStyle:{
                    color: '#8fa1ba',
                    fontSize:18*currentFontSize/100
                },
                padding:[0, 0 ,0 ,0]
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['借出','还入'],
                x:'right',
                itemWidth: 16,             // 图例图形宽度
                itemHeight: 8,
                textStyle:{
                    color: '#98a8c2',
                    fontSize:14*currentFontSize/100
                },
                padding:[5, 10 ,0 ,0]
            },
            grid:{
                /*   x:40*currentFontSize/100,
                 x2:10*currentFontSize/100,
                 y:40*currentFontSize/100,
                 y2:40*currentFontSize/100*/
                x:'8%',
                x2:'4%',
                y:'16.6%',
                y2:'20.8%'
            },
            color:['#62ca5f','#e8a20d'],
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap:true,
                    axisLine:{
                        lineStyle:{
                            color: '#404155',
                            width: 1
                        },
                        onZero:true
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color: '#404155'
                        },
                    },
                    axisLabel:{
                        interval:0,
                        textStyle: {
                            color:'#98a8c2',
                            fontSize:14*currentFontSize/100
                        }
                    },
                    data : []
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine:{
                        lineStyle:{
                            color: '#404155',
                            width: 1
                        }
                    },
                    boundaryGap:true,
                    splitLine:{
                        lineStyle:{
                            color: '#404155'
                        }
                    },
                    axisLabel : {
                        show:true,
                        formatter: '{value}',
                        textStyle: {
                            color:'#98a8c2',
                            fontSize:14*currentFontSize/100
                        }
                    }
                }
            ],
            series : [
                {
                    name:'借出',
                    type:'line',
                    symbolSize : 8*currentFontSize/100,
                    smooth: true,
                    symbol: "triangle",
                    label: {
                        normal: {
                            show: true,
                            position:  'right',
                        }
                    },
                    animationDelay: function (idx) {
                        return idx * 10 + 100;
                    },
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                type: 'solid'
                            }
                        }
                    },
                    data : []
                },
                {
                    name:'还入',
                    type:'line',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',//'insideBottomRight'[5, 10]
                        }
                    },
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                type: 'solid'
                            }
                        }
                    },
                    symbolSize : 8*currentFontSize/100,
                    smooth: true,
                    symbol: "circle",
                    animationDelay: function (idx) {
                        return idx * 10;
                    },
                    data : [245,186,104,208,147,344]
                }
            ],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        };
        //曲线图动效函数
        function chart_move(){
            cancelAnimationFrame(chart_move);
//            clearTimeout(chart_timer);
            myChart.clear();
            myChart.setOption(option);
            chart_timer=setTimeout(function(){
                requestAnimationFrame(chart_move)
            },8000);
        }
        //曲线图数据连接
        var websocket_line;
        //最大重连次数
        var max_try_num_borrow_line = 10;
        var curr_try_num_borrow_line = 0;
        function mychart(ws_url){
            curr_try_num_borrow_line++;
            try{
                websocket_line=new WebSocket(ws_url);//参数是服务器地址，还有一个参数是自协议可以不写
                //当服务器连接成功之后，监听建立连接
                websocket_line.onopen=function(res){
                    console.log('info ---->> 借阅曲线连接成功...');
                };
                websocket_line.onmessage=function(msg){
                    var json = JSON.parse(msg.data);
                    var data = json.data;
                    if (data == null || data == undefined || data.length == 0) {
                        console.log("warning ---->> 借阅曲线无数据返回...");
                        return;
                    }
                    var back_book=[];//每次推得到新数组，还入曲线数据
                    var out_book=[];//每次推得到新数组，借出曲线数据
                    $.each(data,function(i,e){
                        var tmp_back={};
                        var tmp_out={};
                        var time = e.f_update_time.split(" ")[1].split(":")[0] + ":00";
                        tmp_back.kp_time = time;
                        tmp_back.kp_value = e.f_back_count;
                        tmp_out.kp_time = time;
                        tmp_out.kp_value = e.f_out_count;
                        back_book.push(tmp_back);
                        out_book.push(tmp_out);
                    });
                    console.log('info ---->> 借阅曲线数据更新了...');
                    option.xAxis[0].data=[];///每次有新数据就把x轴时间点清空
                    option.series[0].data=[];///每次有数据就把借出数据清空
                    option.series[1].data=[];///每次有数据就把还入数据清空
                    if(back_book.length==1){
                        ///说明只有一个点8点，那么此时就把0点添加进去形成一个折线展示的形式，否则就遍历显示
                        option.xAxis[0].data.push("00.00");//追加0点
                        option.xAxis[0].data.push("08:00");//追加8点
                        option.series[1].data.push(0);//追加还入曲线0点数据
                        option.series[1].data.push(back_book[0].kp_value);//追加还入曲线8点数据
                        option.series[0].data.push(0);//追加借出曲线0点数据
                        option.series[0].data.push(out_book[0].kp_value);//追加借出曲线8点数据
                    }else{
                        $.each(back_book,function(i,e){
                            ///遍历还入数据，e.kp_value 是数据，e.kp_time是时间点
                            option.xAxis[0].data.push(e.kp_time);//追加每个时间点
                            option.series[1].data.push(e.kp_value);//追加还入曲线数据
                        });
                        $.each(out_book,function(i,e){
                            ///遍历借出数据，e.kp_value 是数据，e.kp_time是时间点，时间点之前加过一次，这次可以不加了
                            option.series[0].data.push(e.kp_value);//追加借出曲线数据
                        });
                    }
                    requestAnimationFrame(chart_move);
                };
                websocket_line.onclose=function(event){
                    if (curr_try_num_borrow_line <= max_try_num_borrow_line) {
                        console.log("warning ---->> 借阅曲线连接关闭，6秒后重新连接...");
                        setTimeout(function () {
                            mychart(wsPath2);
                        }, 6000);
                    } else {
                        console.log("warning ---->> 借阅曲线连接超过最大重连次数，不再重连...");
                    }
                };
                websocket_line.onerror = function () {
                    console.log("error ---->> 借阅曲线连接发生错误...");
                };
            } catch (e) {
                console.log("error ---->> 借阅曲线连接发生错误...");
            }

        }

        //借还书数字变化数据连接
        var websocket_borrow;
        //最大重连次数
        var max_try_num_borrow_count = 10;
        var curr_try_num_borrow_count = 0;
        function borrow_book(ws_url){
            curr_try_num_borrow_count++;
            try{
                websocket_borrow=new WebSocket(ws_url);//参数是服务器地址，还有一个参数是自协议可以不写
                websocket_borrow.onopen=function(res){
                    console.log('info ---->> 借阅统计连接成功...');
                };
                websocket_borrow.onmessage=function(msg){
                    var json = JSON.parse(msg.data);
                    var data = json.data;
                    if (data == null || data == undefined || data.length == 0) {
                        console.log("warning ---->> 借阅统计无数据返回...");
                        return;
                    }
                    console.log('info ---->> 借阅统计数据更新了...');
                    clearTimeout(borrow_timer);///每次推送数据都把之前的定时器清除
                    outByDay=isNull(data[0].f_borrow_count_by_day);
                    outByWeek=isNull(data[0].f_borrow_count_by_week);
                    outByAll=isNull(data[0].f_borrow_count_all);
                    $("#borrow_todayNum").html(outByDay);
                    $("#borrow_weekNum").html(outByWeek);
                    $("#borrow_totalNum").html(outByAll);
                    borrow_num_move();
                    divFlex("borrow");////调用缩放功能
                };
                websocket_borrow.onclose=function(event){
                    if (curr_try_num_borrow_count <= max_try_num_borrow_count) {
                        console.log("warning ---->> 借阅统计连接关闭，6秒后重新连接...");
                        setTimeout(function () {
                            borrow_book(wsPath1);
                        }, 6000);
                    } else {
                        console.log("warning ---->> 借阅统计连接超过最大重连次数，不再重连...");
                    }
                };
                websocket_borrow.onerror = function () {
                    console.log("error ---->> 借阅统计连接发生错误...");
                };
            } catch (e) {
                console.log("error ---->> 借阅统计连接发生错误...");
            }
        }
        window.onresize = function(){
            page_init(100,572,"借还书系统");
            currentFontSize = page_init(100,572,"借还书系统");
            myChart.resize();
        };


    }
</script>

</html>